<template>
    <div class="vref">
        <h2>ref</h2>
        <div class="hr"></div>
        <el-tag effect="dark">作用</el-tag>
        <p class="decr">
            获取和使用DOM。<br>
        </p>
        <div class="hr"></div>
        <el-tag effect="dark">使用方法</el-tag>
        <p class="decr">
            1. 要获取哪个DOM元素，就在该dom标签里加上ref属性，并给ref设置个名字，即ref="名字"。<br>
            2. 在dom元素加载完毕后，通过 this.$refs.名字 来获取该dom元素。<br>
            3. 随后，即可通过对 this.$refs.名字 的操作，来操作该DOM了。<br>
        </p>
        <div class="hr"></div>
        <el-tag effect="dark">Demo</el-tag>
        <p class="decr">
            <el-input ref="input1"></el-input><br>
            <el-button @click="makeFocus" style="marginTop: 10px;">点击让input获取焦点</el-button>
        </p>
        <div class="hr"></div>
        <el-tag
            effect="dark"
            type="success"
            >
            <a :href="getHref" target="_blank">查看示例代码</a>
        </el-tag>
    </div>
</template>

<script>
import mixinPage from './mixin-page';

export default {
    name: 'Vref',
    mixins: [mixinPage],
    methods: {
        makeFocus() {
            console.log('@@: ', this.$refs.input1);
            this.$refs.input1.focus();
        }
    }
}
</script>

<style lang="less" scoped>
@import '../assets/css/mixin-frame.less';
</style>